<script lang="ts" setup>
import { type PropType } from 'vue';

const { menubarItem, routerMode } = defineProps({
  menubarItem: {
    type: Object as PropType<Record<string, any>>,
    default: () => ({}),
  },

  routerMode: {
    type: Boolean,
    default: false,
  },
});
</script>

<template>
  <div>
    <a class="focus-visible:outline-unset" :href="menubarItem.jumpUrl" target="_blank" v-if="menubarItem.barType === 1">
      {{ menubarItem.barName }}
    </a>

    <template v-else-if="menubarItem.barType === 2">
      <RouterLink class="focus-visible:outline-unset" :to="`/tag/${menubarItem.labelId}`" v-if="routerMode">
        {{ menubarItem.barName }}
      </RouterLink>
      <a class="focus-visible:outline-unset" :href="`/tag/${menubarItem.labelId}`" target="_blank" v-else>
        {{ menubarItem.barName }}
      </a>
    </template>

    <template v-else-if="menubarItem.barType === 3">
      <RouterLink class="focus-visible:outline-unset" :to="`/column/detail/${menubarItem.columnId}`" v-if="routerMode">
        {{ menubarItem.barName }}
      </RouterLink>
      <a class="focus-visible:outline-unset" :href="`/column/detail/${menubarItem.columnId}`" target="_blank" v-else>
        {{ menubarItem.barName }}
      </a>
    </template>

    <span class="cursor-default focus-visible:outline-unset" v-else>
      {{ menubarItem.barName }}
    </span>
  </div>
</template>

<style lang="scss" scoped>
</style>
